<template>
<div style="background: #fff; height: 100%;">
    <ylheader :title="'发现圈子'" ></ylheader>
    <!--<div class="all-hot-title" >精选推荐</div>-->
  <p style="height:.1rem"></p>
  <div class="shuoshuo-new" v-if="listnodata" style="background:#ffffff;">
          <span class="yl-2kong nosvg">
            <span class="path1">
              <span class="path2">
                <span class="path3">
                  <span class="path4">
                    <span class="path5">
                      <span class="path6">
                        <span class="path7">
                          <span class="path8">
                            <span class="path9"></span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
          </span>
          <span class="no-text">还没有相关内容哦~</span>
        </div>
  <div class="loadmore-container" ref="collectionWrapper" v-else>
    <div class="loadmore-ul">
        <ul  class="discoverylist">
          <li v-for="(items,index) in list" :key="index" @click="goDetail(items.id)">
            <div class="img">
              <img  v-lazy="items.pic" class="imgtextback"/>
            </div>
            <p class="title">{{items.name}}</p>
            <p class="btn" @click.stop="joinin(items.id)"><span>加入</span></p>
          </li>
        </ul>
        <p style="height:0.33rem;"></p>
      </div>
    </div>
</div>
</template>
<script>
import ylheader from "src/components/yl-header.vue";
import indexnavigation from "src/components/index/indexnavigation.vue";
import api from "src/api/index";
import {Indicator} from "mint-ui";
import {mapMutations} from "vuex";
export default {
  name:"findDiscovery",
  data(){
    return {
       list:[],
       page: 1,
       totalPage: 0,
       is_r:false,
       listnodata:false,
    }
  },
  components:{
    ylheader,
    api,
    indexnavigation
  },
  mounted(){
  },
  created(){
    this.queryDiscoveryUNjoin().then(data=>{
      this.initScroll();
    }).then(data => {
      this.$nextTick(() => {
        if (!!this.myscroll) this.myscroll.refresh();
      });
      let loadmore = document.getElementsByClassName("loadmore-ul");
      if ("collect2detail" == localStorage.turnCount) {
        if (loadmore.length > 0) {
          setTimeout(() => {
            loadmore[0].style.transform = localStorage.turnBackCollection;
          }, 0);
        }
        localStorage.turnCount = "";
      }
    });;
  },
  methods:{
    joinin(id){
      let data = {
        ids:id
      }
      // api.queryDiscoveryjoin(data).then(res => {
      //   if(res.success){
      //     this.$toast("操作成功");
      //     this.queryDiscoveryUNjoin();
      //   }else{
      //     this.$toast("操作失败");
      //   }
      // })
      api.querycirclejoin(data).then(res => {
        if(res.success){
          this.$toast("操作成功");
          this.page = 1;
          this.is_r = false;
          this.queryDiscoveryUNjoin().then(data=>{
            this.initScroll();
          })
        }else{
          this.$toast("操作失败");
        }
      })
    },
    ...mapMutations(["changecollectionselected"]),
    //初始化scroll
    initScroll() {
      let p = new Promise((resolve, reject) => {
        this.$nextTick(() => {
          let collectionWrapper = this.$refs.collectionWrapper;
          this.setScroll(collectionWrapper, this);
        });
        resolve("初始化scroll结束...");
      });
      return p;
    },
    setScroll(collectionWrapper, _this) {
      localStorage.tempPageHeight = document.getElementsByClassName(
        "loadmore-ul"
      )[0].scrollHeight;
      _this.myscroll = new iScroll(collectionWrapper, {
        //上拉时触发
        onScrollMove: function() {
          if (
            this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
            _this.is_r == false
          ) {
            //加载数据
            _this.is_r = true;
            if(_this.page<_this.totalPage){
              _this.page++;
              _this.queryDiscoveryUNjoin();
            }
          }
        },
        onScrollEnd: function() {},
        onScrollStart: function() {
          if (
            localStorage.tempPageHeight !=
            document.getElementsByClassName("loadmore-ul")[0].scrollHeight
          ) {
            this.refresh();
            localStorage.tempPageHeight = document.getElementsByClassName(
              "loadmore-ul"
            )[0].scrollHeight;
          }
        }
      });
    },
    queryDiscoveryUNjoin(){
         let p = new Promise((resolve, reject) => {
           const data = {
             page: this.page,
             limit: 10,
           }
           api.queryDiscoveryUNjoin(data).then(res => {
             console.log(res);
             if (res.success) {
               this.totalPage = res.data.totalPage
               this.list = this.is_r
                 ? [...this.list, ...res.data]
                 : res.data;
               if (this.page < res.data.totalPage) {
                 this.is_r = false;
               }
               if (this.list.length == 0) {
                 this.listnodata = true;
               } else {
                 this.listnodata = false;
               }
               if (this.myscroll) {
                 this.$nextTick(() => {
                   this.myscroll.refresh();
                 });
               }
               let discoveryObj = JSON.stringify({
                 list: this.list,
                 page: this.page,
                 totalPage: this.totalPage,
               });
               localStorage.discoveryStorage = discoveryObj;
               resolve("获取推送内容...");
             }
             resolve("所有结果...");

           })
         })
      return p;
    },

    goDetail(id){
      this.$router.push({path:'discoveryDetails',query:{id:id}})
    },
    gotodetail(data){
      localStorage.turnCount = "discovery2detail";
      this.getTransformState();
        this.$router.push({
          path:"/topicdetail",
          query:{topicId:data}
        })
    },
    //获取跳转前的位置
    getTransformState() {
      let loadmore = document.getElementsByClassName("loadmore-ul");
      if (loadmore.length > 0) {
        localStorage.turnBackDiscovery = loadmore[0].style.transform;
      }
    }
  }
}
</script>
<style scoped lang="less">
.img-with-text{
    background: #ffffff;
    position: relative;
    margin-bottom: 0.28rem;
    width: 3.35rem;
    height: 3.1rem;
    border-radius: 0.1rem;
}
.imgtextback{
  width: 100%;
  height: 1.67rem;
  border-radius: 0.1rem 0.1rem 0 0;
}
.img-with-text p{
  margin: 0;
}
.topiclisttitle{
  font-size: 0.24rem;
  color: #333;
  padding: 0.07rem 0.2rem 0.1rem 0.2rem;
  font-family: PingFangSC Medium;
  line-height: 0.36rem;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.topiclistfollownumber{
  font-size: 0.24rem;
  color: #999999;
}
 .hottopictitle {
  font-size: 0.24rem;
  color: #333;
  width: 1.88rem;
  height: 0.44rem;
  line-height: 0.44rem;
  position: absolute;
  top: 0.3rem;
}
.indexhottuati{
  display: flex;
  align-items: center;
  justify-content: center
}
.discoverylist{
    width:100%;
  margin-bottom:.3rem;
}
.discoverylist li{
  height: 1.6rem;
    padding-left: 0.3rem;
  padding-bottom: .4rem;
  width:100%;
  background-color: #fff;
  .img{
    width:1.2rem;
    height:1.2rem;
    border-radius: 50%;
    float: left;
    overflow: hidden;
    img{
      width:100%;
      height: 100%;
    }
  }
  .title{
    font-size: .32rem;
    font-weight: 400;
    color: #333333;
    line-height: 1.2rem;
    height: 1.2rem;
    float: left;
    margin-left: .24rem;
    text-align: left;
  }
  .btn{
    font-size: .28rem;
    width:1.44rem;
    height:.64rem;
    background:rgba(251,104,91,1);
    border-radius:.12rem;
    float: right;
    margin-top: .28rem;
    margin-right: .3rem;
    line-height: .64rem;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.follownumbase{
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0.2rem;
    padding:0 0.2rem;
}
.follownumicon{
    font-size: 0.26rem;
    color: #999999;
}
.all-hot-title {
  background: #f5f5f5;
  height: 0.8rem;
  padding:0.02rem 0 0 0.3rem;
  font-size: 0.3rem;
  display: flex;
  align-items: center;
  font-family: "PingFangSC Regular";
  color: #3a3a3a;
}
.discoverylabel{
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top: 0.16rem;
  left: 0.16rem;
  color: #ffffff;
  font-size: 0.22rem;
  border-radius:0.22rem;
}
.discoverylabel div{
  padding: 0.02rem 0.15rem;
}
</style>

